<template>
  <div>
      <v-card hover>
          <chart :options="option" auto-resize style="width:100%"></chart>
      </v-card>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import ecStat from 'echarts-stat'
export default {
  components: {
    chart: ECharts
  },
  mounted () {
    this.getData()
    
  },
  methods: {
    getData () {
      let tvm = this
      this.axios.get('/api/getprice/distance')
      .then(function (response) {
        let data = response.data
        let myRegression = ecStat.regression('linear', data);
        myRegression.points.sort(function(a, b) {
            return a[0] - b[0];
        });
        tvm.option.series[0].data = data;
        tvm.option.series[1].data = myRegression.points
        tvm.option.series[1].markPoint.label.normal.formatter = myRegression.expression
        tvm.option.series[1].markPoint.data[0].coord = myRegression.points[myRegression.points.length - 1]
      })
      .catch(function (err) {
        console.log(err)
      })
    }
  },
  data: () => ({
    option: {
      title: {
        text: '房价与到市中心距离的联系'
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross'
          }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
          type: 'value',
          splitLine: {
              lineStyle: {
                  type: 'dashed'
              }
          },
      },
      yAxis: {
          type: 'value',
          min: 1.5,
          splitLine: {
              lineStyle: {
                  type: 'dashed'
              }
          },
      },
      series: [{
        name: 'scatter',
        type: 'scatter',
        label: {
            emphasis: {
                show: true,
                position: 'left',
                textStyle: {
                    color: 'blue',
                    fontSize: 16
                }
            }
        },
        data: ''
      }, {
          name: 'line',
          type: 'line',
          showSymbol: false,
          data: '',
          markPoint: {
              itemStyle: {
                  normal: {
                      color: 'transparent'
                  }
              },
              label: {
                  normal: {
                      show: true,
                      position: 'left',
                      formatter: '',
                      textStyle: {
                          color: '#333',
                          fontSize: 14
                      }
                  }
              },
              data: [{
                  coord: ''
              }]
          }
      }]
    }
  }),
}
</script>